<template>
  <div class="spl-container">
    <breadcrumb :data="pathData"></breadcrumb>
    <div class="emp-container">
      <div class="search-row m-form">
        <el-date-picker
          v-model="beginYearMonth"
          type="month" value-format="yyyyMM" class="label-sel w-150">
        </el-date-picker>
        <span class="ml-10">~</span>
        <el-date-picker
          v-model="endYearMonth"
          type="month" value-format="yyyyMM" class="label-sel w-150">
        </el-date-picker>

        <el-input placeholder="搜索姓名/证照号码/扣缴义务人" class="ml-20 w-220" v-model="searchValue"></el-input>

        <el-button type="primary" class="opt-btn ml-20" icon="icon el-icon-search" @click="getTableData">查询</el-button>

        <!--<div class="search-row-btn">
          <el-button type="primary" class="opt-btn opt-button" @click="drawer=true">筛选</el-button>
        </div>-->
      </div>

      <!--筛选-->
      <el-drawer
        title="更多筛选"
        :visible.sync="drawer" size="420px">
        <div class="more-search">
          <div class="search-row-btn float-none clearfix">
            <el-button type="primary" class="opt-btn opt-button green-btn fr" @click="getTableData">提交筛选</el-button>
          </div>
          <!--<div class="more-search-row clearfix">
            <span class="fl">发放结果：</span>
            <el-checkbox-group v-model="releaseResult" class="fl">
              <el-checkbox label="1">待发放</el-checkbox>
              <el-checkbox label="2">发放成功</el-checkbox>
              <el-checkbox label="3">发放失败</el-checkbox>
            </el-checkbox-group>
          </div>-->
          <div class="more-search-row">
            <p class="text-right"><span class="text-red">0</span>个银行账号</p>
            <el-input type="textarea" :rows="2"
                      :autosize="{minRows: 3, maxRows: 3}"
                      placeholder="" v-model="bankNo"></el-input>
          </div>
          <div class="more-search-row">
            <p class="text-right"><span class="text-red">0</span>个证件号码</p>
            <el-input type="textarea" :rows="2"
                      :autosize="{minRows: 3, maxRows: 3}"
                      placeholder="" v-model="idCardNo"></el-input>
          </div>
          <div class="more-search-row clearfix" style="margin-top: 20px;">
            <span class="fl lh-com">所属部门：</span>
            <treeSelect :options="deptData" :clearable="false" @getNodeValue="getNodeValue"></treeSelect>
          </div>
        </div>
      </el-drawer>
      <!--筛选-->

      <dTable @fetch="getTableData" ref="empTable" :tableHeight="tableHeight" :showIndex="true">
        <el-table-column prop="employeeName" label="员工姓名" min-width="150" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="employeeIdCard" label="证照号码" min-width="300" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="telephone" label="手机号码" min-width="280" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="empBankAccount" label="银行账号" min-width="280" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="empBankDictName" label="银行开户信息" min-width="300" header-align="center" align="left" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <p v-text="scope.row.empBankDictName+'-'+scope.row.bankBranch"></p>
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="组织部门" min-width="200" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="presidentName" label="岗位" min-width="200" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="itemTypeDesc" label="收入类型" min-width="200" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="obligorName" label="扣缴义务人" min-width="200" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="incomeDate" label="收入所属期" min-width="200" header-align="center" align="center" :show-overflow-tooltip="true" :formatter="formatDateFun"></el-table-column>
        <el-table-column prop="plannedAmount" label="应发金额" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="taxAmount" label="应缴个税" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="actualAmount" label="实发金额" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column header-align="center" v-show="showDetailFlag" :min-width="2000" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="scope">
            <p>薪酬组成</p>
            <!--<el-button type="text" @click="closeDetail">薪酬组成</el-button>-->
          </template>
          <el-table-column v-for="(item, index) in salaryItems" :prop="item" :label="item" min-width="200" header-align="center" align="right">
            <template slot-scope="scope">
              <p v-text="scope.row.salaryItems==null?'':scope.row.salaryItems[item]"></p>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="累计扣除" header-align="center" v-show="showDetailFlag" min-width="2300">
          <el-table-column prop="totalTaxThreshold" label="减除费用" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="entryDate" label="子女教育" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <p v-text="scope.row.taxAdditionalItems['70018001']"></p>
            </template>
          </el-table-column>
          <el-table-column prop="entryDate" label="继续教育" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <p v-text="scope.row.taxAdditionalItems['70018005']"></p>
            </template>
          </el-table-column>
          <el-table-column prop="entryDate" label="大病医疗" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <p v-text="scope.row.taxAdditionalItems['70018006']"></p>
            </template>
          </el-table-column>
          <el-table-column prop="entryDate" label="赡养老人" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <p v-text="scope.row.taxAdditionalItems['70018004']"></p>
            </template>
          </el-table-column>
          <el-table-column prop="entryDate" label="住房租金" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <p v-text="scope.row.taxAdditionalItems['70018003']"></p>
            </template>
          </el-table-column>
          <el-table-column prop="entryDate" label="住房贷款利息" min-width="300" header-align="center" align="right" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <p v-text="scope.row.taxAdditionalItems['70018002']"></p>
            </template>
          </el-table-column>
        </el-table-column>
        <template slot="pagination-btns">
          <el-button type="primary" class="opt-btn s-btn" icon="ic-export" @click="exportData">导出</el-button>
        </template>
        <!--<el-table-column fixed="right" header-align="center" v-show="toShow">
          <template slot="header">
            <el-button type="text" @click="showDetail">明细</el-button>
          </template>
          <template slot-scope="scope">
            <p></p>
          </template>
        </el-table-column>-->
      </dTable>
    </div>
  </div>
</template>
<script>
import dTable from '../../../components/common/table'
import treeSelect from '../../../components/common/treeSelect'
export default {
  components: { dTable,treeSelect },
  data () {
    return {
      // 导航
      pathData: [
        { name: '薪税管理' },
        { name: '薪酬历史明细', path: '/salaryHistoryDetails' }
      ],
      drawer: false,
      searchValue: '',
      bankNo: '',
      idCardNo: '',
      beginYearMonth: this.$moment(new Date()).format("YYYYMM"),
      endYearMonth: this.$moment(new Date()).format("YYYYMM"),
      //  更多筛选
      releaseResult: ['1', '2', '3'],
      deptData: [],
      deptId: '',
      deptName: '',
      toShow: true,
      showDetailFlag: false,
      salaryItems: []
    //  更多筛选
    }
  },
  created () {
    //获取薪酬组成项
    this.getSalaryItems()
    this.getDepts()
    this.$nextTick(() => {
      this.getTableData()
    })
  },
  computed: {
    tableHeight: function () {
      return this.$global.bodyHeight - 220 + 'px'
    }
  },
  methods: {
    formatDateFun (row, column, cellValue, index) {
//      return cellValue == null ? '-' : this.$global.dateToStr(new Date(cellValue+"01").getTime())
      return cellValue
    },
    getDepts(){
        this.$http({
          url: 'company/organization/tree',
          method: 'get',
          params: {}
        }).then(({data}) => {
          if(data.code == 0){
              this.deptData = this.$global.deepcopyArrayProperty(data.data.subOrginization,{'id':'id','name':'title'})
          }else{
            this.$message({
              type: 'error',
              message: '系统异常',
            });
          }
        })
    },
    getSalaryItems (){
      this.$http({
        url: '/salary/insteadBill/getDynamitHead',
        method: 'get',
        params: {}
      }).then(({data}) => {
          this.salaryItems = data.data==null?[]:data.data
      })
    },
    getTableData (params = []) {
        if(new Date(this.endYearMonth)<new Date(this.beginYearMonth)){
          this.$message.warning('结束时间不能小于开始时间！')
          return;
        }
      params =
        [
          { property: 'startDate', value: this.getIntValue(this.beginYearMonth) },
          { property: 'endDate', value:  this.getIntValue(this.endYearMonth) },
          { property: 'searchValue', value: this.searchValue }
          /*{ property: 'empBankAccount', value: this.bankNo },
          { property: 'employeeIdCard', value: this.idCardNo },
          /!*{ property: 'releaseResult', value: this.releaseResult },*!/
          { property: 'deptName', value: this.deptName }*/
        ]
      this.$refs.empTable.fetch(params, 'post', 'salary/accounting/platformBills/page')
      this.drawer = false  //关闭更多筛选
    },
    getIntValue(value){
        if(value){
            return parseInt(value)
        }
        return null
    },
    getNodeValue (node) {
        if(node !=null){
          this.deptId = node.id
          this.deptName = node.title
        }else {
            this.deptId = ''
          this.deptName = ''
        }
    },
    exportData (){
      var requestParams = this.$refs.empTable.getParamsObj()
      this.$downloadFile('/salary/accounting/export', 'post', requestParams, this.$global.EXCEL)
    },
    showDetail (){
      this.toShow = false
      this.showDetailFlag = true
    },
    closeDetail (){
      this.toShow = true
      this.showDetailFlag = false
    }
  }
}
</script>
<style lang="less" scoped>
  .emp-container {
    padding: 20px;
    position: relative;
    height: 100%;
  }
</style>
